<template>
  <demo-content :title="title">
    <p></p>
    <canvas ref="canvasRef"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { rect, ellipse } from "./utils";

const title = "ts装饰器";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  rect.draw(ctx, {
    x: 10,
    y: 10,
    w: 50,
    h: 50,
    strokeStyle: "blue",
    fillStyle: "yellow",
  });

  ellipse.draw(ctx, {
    x: 80,
    y: 80,
    radiusX: 30,
    radiusY: 15,
    rotation: Math.PI / 4,
    startAngle: 0,
    endAngle: Math.PI,
    counterclockwise: false,
    fillStyle: "orange",
    strokeStyle: "green",
  });
});
</script>

<style src="./default.css" scoped></style>

<style lang="css">
ul.operator {
  padding-bottom: 20px;
}
ul.operator li {
  margin-bottom: 10px;
}
</style>
